<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>web存储_localStorage</title>

    <style>
        #localStorageDiv {
            border: 2px dashed #cccccc;
            width: 320px;
            text-align: center;
        }

    </style>

</head>
<body>
<br>
<br>
<br>
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。<br>
存储大小在20mb左右.
不管是 localStorage，还是 sessionStorage，可使用的API都相同，<br>

常用的有如下几个（以localStorage为例）：
<br><br>
保存数据：localStorage.setItem(key,value);<br>
读取数据：localStorage.getItem(key);<br>
删除单个数据：localStorage.removeItem(key);<br>
删除所有数据：localStorage.clear();<br>
得到某个索引的key：localStorage.key(index);

<br>
<br>
<br>


<div id="localStorageDiv"></div>

<label for="siteName">网站名(key):</label>
<input type="text" id="siteName" name="siteName" class="text"><br><br>

<label for="siteUrl">网址(value):</label>
<input type="text" id="siteUrl" name="siteUrl"><br><br>

<input type="button" onclick="seva()" value="新增记录"><br><br>
<hr>

<label for="search_site">输入网站名:</label>
<input type="text" id="search_site" name="search_site">
<input type="button" onclick="find()" value="查找记录"><br>
<p id="find_resut"></p><br>


<script>


    function seva() {

        var sitekey = document.getElementById("siteName").value;
        var siteValue = document.getElementById("siteUrl").value;

        window.localStorage.setItem(sitekey, siteValue);
        alert("添加成功!");

    }

    function find() {

        var searchite = document.getElementById("search_site").value;
        var siteValue = window.localStorage.getItem(searchite);

        var findResut = document.getElementById("find_resut");

        findResut.innerHTML = searchite + "的网址是:" + siteValue;

    }


</script>


</body>
</html>
